<template>
  <div class="wrap">
    <div
      class="productionItem"
      v-for="(item, index) in resMenuInfo.goodsList"
      :key="index"
    >
      <div class="proIntroWrap">
        <div class="proIntroLeft">
          <img :src="$imgUrl + item.listImgUrl" alt="" class="proPoster" />
        </div>
        <div class="proIntroRight">
          <div class="proIntro">
            {{ resMenuInfo.shopName }}
          </div>
          <div class="workTime">
            <div class="timeLeft">{{ item.specsName }}X{{ item.payNum }}</div>
            <div class="saleRight"><em class="moneyLogo">￥</em>{{ item.payPrice }}</div>
          </div>
        </div>
      </div>
      <div class="textArea">
        <textarea
          rows=""
          cols=""
          placeholder="请输入评论(100字)"
          maxlength="100"
          v-model="item.content"
        ></textarea>
      </div>
      <div class="uploadImg">
        <van-uploader v-model="item.fileList" :after-read="afterRead" :max-count="3" />
      </div>
    </div>
    <div style="height: 130px"></div>
    <div class="submit" @click="commentPublish">发布</div>
  </div>
</template>
<script>
import { Field, Uploader,Toast } from "vant";
import { apiCommentPublish } from "@/request/api"; // api接口
import axios from "axios"; // 引入axios
export default {
  name: "App",
  data() {
    return {
      resMenuInfo: this.$route.query.resMenuInfo,
    };
  },
  mounted() {
    console.log("评价", this.resMenuInfo);
    var goodsList = this.resMenuInfo.goodsList;
    goodsList.map((item, index) => {
      item.content = "";
      item.fileList = [];
      item.commentImg = "";
      item.deleArry = [];
    });
    console.log("resMenuInfo", this.resMenuInfo);
  },
  methods: {
    //上传图片：
    afterRead(file) {
      this.$forceUpdate(); //强制刷新 更新视图 图片上传显示问题
    },
    upLoadImg(dataItem, index) {
      var that = this;
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      form_data.append("file",dataItem);
      axios({
        url: serverSrc + "/common/upload",
        data: form_data,
        contentType: false,
        processData: false,
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
          that.resMenuInfo.goodsList[index].commentImg =that.resMenuInfo.goodsList[index].commentImg + res.data.data.fileName + ",";
      });
    },
    //发布评价
    commentPublish() {
      Toast.loading({
      message: '加载中...',
      forbidClick: true,
     });
      var that = this;
      var reqObj = {
        orderId: this.resMenuInfo.id,
        commentList: [],
      };

      console.log("开始遍历", this.resMenuInfo.goodsList);
      this.resMenuInfo.goodsList.map((item, index) => {
        if (item.content == "") {
          that.$toast.fail("请填写完整评价内容");
          return;
        }
        var obj = {
          commentImg: "",
          content: "",
          goodsId: "",
          goodsName: "",
          orderId:this.resMenuInfo.id,
          specsName: "",
        };
        item.fileList.map((itemImg) => {
          that.upLoadImg(itemImg.file, index);
        });
        setTimeout(() => {
            obj.commentImg = item.commentImg.toString().slice(0, -1);
            obj.content = item.content;
            obj.goodsId = item.goodsId;
            obj.goodsName = item.goodsName;
            obj.specsName = item.specsName;
            reqObj.commentList.push(obj);
        }, 500);
      });
      console.log("reqObj", reqObj);
      setTimeout(() => {
        apiCommentPublish(reqObj).then((res) => {
          if (res.code == 200) {
            that.$toast.success("已评价");
            that.$router.push({
              path: "/pages/allOrderList",
              query: {
                //传递参数
              },
            });
          }
        });
      }, 600);
    },
  },
  created() {},
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
  },
};
</script>

<style scoped>
.wrap {
  min-height: 100vh;
  background-color: #f2f4fa;
  padding-top: 15px;
}
.lineItem {
  margin-bottom: 5px;
}
.textArea {
  width: 100%;
  margin: 20px auto;
  background: #f2f4fa;
  border-radius: 20px;
  margin-top: 40px;
}
textarea {
  width: 87%;
  border: 1px solid #f2f4fa;
  height: 90px;
  border-radius: 20px;
  padding: 20px;
  background: #f2f4fa;
}
textarea::placeholder {
  font-size: 13px;
  font-weight: 300;
  color: #999999;
}
.uploadImg {
  width: calc(100% - 20px);
  margin: 21px auto;
}

.submit {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 5%;
}

.productionItem {
  width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 130px;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px 15px;
  margin-top: 15px;

  /* width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px; */
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
  border-radius: 15px;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
</style>
